<include file="Common/header" />
<title>水电气费管理</title>
</head>
<body>
<nav class="breadcrumb">
	<i class="Hui-iconfont">&#xe67f;</i> 首页 <span class="c-gray en">&gt;</span> 财务管理
	<span class="c-gray en">&gt;</span> 退房管理
	<a class="btn btn-success radius r mr-20" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新" >
		<i class="Hui-iconfont">&#xe68f;</i>
	</a>
</nav>
<div style="padding-left: 20px;padding-top: 20px;padding-right: 20px">
	<span style="display: inline-block;width: 280px;text-align: right;margin-left: 13px;">
		房间编号：<input class="input-text radius" id="room_number" name="room_number" style="width:200px" />
	</span>
	<span style="display: inline-block;width: 280px;text-align: right;margin-left: 13px;">
		合同编号：<input class="input-text radius" id="contract" name="contract" style="width:200px" />
	</span>
	<a href="javascript:;" class="btn btn-success radius querys"><i class="Hui-iconfont">&#xe709;</i> 查询</a> 
</div>

<div class="pd-20">
	<div class="codeView docs-example" data-afterContent="用户基本信息">
		<table class="table table-border table-bordered table-striped">
			<tbody>
				<tr>
					<td align="right" bgcolor="#f1f1f1">姓名：</td>
					<td>
						<input type="text" name="field1" id="field1" class="input-text radius" value="" />
					</td>
					<td align="right" bgcolor="#f1f1f1">合同号：</td>
					<td>
						<input type="text" name="field2" id="field2" class="input-text radius" value="" />
					</td>
					<td align="right" bgcolor="#f1f1f1">房租开始时间：</td>
					<td>
						<input type="text" name="field3" id="field3" class="input-text radius" value="" />
					</td>
					<td align="right" bgcolor="#f1f1f1">房租结束时间：</td>
					<td>
						<input type="text" name="field4" id="field4" class="input-text radius" value="" />
					</td>
				</tr>
			</tbody>
		</table>
	</div>
	<div class="codeView docs-example" data-afterContent="退房费用详情">
		<table class="table table-border table-bordered table-striped">
			<tbody>
				<tr>
					<td class="text-c">
						<label for="checkbox-1">押金</label>
					</td>
					<td>
						<input type="text" name="deposit" id="deposit" class="input-text radius keyups" value="0" style="width: 100px;" />
						<span class="usernameabel">元</span>
						<div class="check-box" style="padding-left: 0px; padding-right: 5px;">
							<input type="checkbox" attkey="deposit" name="parentCheckBox" id="parentCheckBox" class="nodeCheckbox nodeCheckbox_1" parent_id="1" style="vertical-align:middle; float: left;" value="1" checked />
						</div>
					</td>
					<td bgcolor="#f1f1f1" class="text-c">
						
						<label for="checkbox-1">房租</label>
					</td>
					<td>
						<input type="text" name="rent" id="rent" class="input-text radius keyups" value="0" style="width: 100px;" />
						<span class="usernameabel">元</span>
						
						<div class="check-box" style="padding-left: 0px; padding-right: 5px;">
							<input type="checkbox" attkey="rent" name="parentCheckBox" id="parentCheckBox" class="nodeCheckbox nodeCheckbox_1 rentss" parent_id="1" style="vertical-align:middle; float: left;" value="1" checked />
						</div>
					</td>
				
					<td bgcolor="#f1f1f1" class="text-c">
						
						<label for="checkbox-1">物业费</label>
					</td>
					<td>
						<input type="text" name="property" id="property" class="input-text radius keyups" value="0" style="width: 100px;" />
						<span class="usernameabel">元</span>
						
						<div class="check-box" style="padding-left: 0px; padding-right: 5px;">
							<input type="checkbox" attkey="property" name="parentCheckBox" id="parentCheckBox" class="nodeCheckbox nodeCheckbox_1" parent_id="1" style="vertical-align:middle; float: left;" value="1" checked />
						</div>
					</td>
					<td bgcolor="#f1f1f1" class="text-c">
						
						<label for="checkbox-1">定金</label>
					</td>
					<td>
						<input type="text" name="deposit_first" id="deposit_first" class="input-text radius keyups" value="0" style="width: 100px;" />
						<span class="usernameabel">元</span>
						<div class="check-box" style="padding-left: 0px; padding-right: 5px;">
							<input type="checkbox" attkey="deposit_first" name="parentCheckBox" id="parentCheckBox" class="nodeCheckbox nodeCheckbox_1" parent_id="1" style="vertical-align:middle; float: left;" value="1" checked />
						</div>
					</td>
				</tr>
				<tr>
					<td bgcolor="#f1f1f1" class="text-c">
						<label for="checkbox-1">水费余额</label>
					</td>
					<td>
						<input type="text" name="water_power" id="water_power" class="input-text radius keyups" value="0" style="width: 100px;" />
						<span class="usernameabel">元</span>
						<div class="check-box" style="padding-left: 0px; padding-right: 5px;">
							<input type="checkbox" attkey="water_power" name="parentCheckBox" id="parentCheckBox" class="nodeCheckbox nodeCheckbox_1" parent_id="1" style="vertical-align:middle; float: left;" value="1" checked />
						</div>
					</td>
					<td bgcolor="#f1f1f1" class="text-c">
						<label for="checkbox-1">电费余额</label>
					</td>
					<td>
						<input type="text" name="electric" id="electric" class="input-text radius keyups" value="0" style="width: 100px;" />
						<span class="usernameabel">元</span>
						<div class="check-box" style="padding-left: 0px; padding-right: 5px;">
							<input type="checkbox" attkey="electric" name="parentCheckBox" id="parentCheckBox" class="nodeCheckbox nodeCheckbox_1" parent_id="1" style="vertical-align:middle; float: left;" value="1" checked />
						</div>
					</td>
					<td bgcolor="#f1f1f1" class="text-c">
						<label for="checkbox-1">其他</label>
					</td>
					<td>
						<input type="text" name="other" id="other" class="input-text radius keyups" value="0" style="width: 100px;" />
						<span class="usernameabel">元</span>
						<div class="check-box" style="padding-left: 0px; padding-right: 5px;">
							<input type="checkbox" attkey="other" name="parentCheckBox" id="parentCheckBox" class="nodeCheckbox nodeCheckbox_1" parent_id="1" style="vertical-align:middle; float: left;" value="1" checked />
						</div>
					</td>
					
					<td bgcolor="#f1f1f1" class="text-c">退款合计</td>
					<td>
						<input type="text" name="acount" id="acount" class="input-text radius" value="0" style="width: 100px;"/>
						<span class="usernameabel">元</span>
					</td>
				</tr>	
				<tr>		
					<td bgcolor="#f1f1f1" class="text-c">退款方式</td>
					<td>
						<span class="select-box radius" style="width: 100px;">
							<select id="pay_type" name="pay_type" class="select radius">
								<option value="0">现金</option>
								<option value="1">支付宝</option>
								<option value="2">微信</option>
								<option value="3">信用卡</option>
							<select>
						</span>
					</td>
					<td bgcolor="#f1f1f1" class="text-c">账/卡号</td>
					<td>
						<input type="text" name="pay_card" id="pay_card" class="input-text radius" value="" style="width: 200px;" />
					</td>
					<td>退房时间</td>
					<td>
						<span class="select-box radius" style="width: 200px;">
							<input type="text" name="createtime" id="createtime" class="select layer-date radius time" value=""  />
						</span>
					</td>
					<td bgcolor="#f1f1f1" class="text-c">备注</td>
					<td>
						<input type="text" name="remark" id="remark" class="input-text radius" value="" style="width: 200px;"/>
					</td>
				</tr>
				<!--
				<tr>
					<td colspan="8" class="text-c">
						<input type="button" value="确定" class="btn btn-success radius roleSubmit" style="width:100px;" />
					</td>
				</tr>-->
			</tbody>
		</table>
	</div>
	<form action="" method="post" class="form form-horizontal" id="uploadform" enctype="multipart/form-data">
		<div class="panel panel-warning">
			<div class="panel-header">上传图片</div>
			<span class="btn-upload form-group mt-5 mb-5 ml-10">
				<input class="input-text upload-url radius" type="text" name="uploadfile-1" id="uploadfile-1" readonly="">
				<a href="javascript:void();" class="btn btn-primary radius upload-btn"><i class="Hui-iconfont"></i> 浏览文件</a>
				<input type="file" multiple="" name="file[]" class="input-file">
			</span>
			<span class="btn-upload form-group mt-5 mb-5 ml-10">
				<input class="input-text upload-url radius" type="text" name="uploadfile-1" id="uploadfile-1" readonly="">
				<a href="javascript:void();" class="btn btn-primary radius upload-btn"><i class="Hui-iconfont"></i> 浏览文件</a>
				<input type="file" multiple="" name="file[]" class="input-file">
			</span>
			<span class="btn-upload form-group mt-5 mb-5 ml-10">
				<input class="input-text upload-url radius" type="text" name="uploadfile-1" id="uploadfile-1" readonly="">
				<a href="javascript:void();" class="btn btn-primary radius upload-btn"><i class="Hui-iconfont"></i> 浏览文件</a>
				<input type="file" multiple="" name="file[]" class="input-file">
			</span>
			<span class="btn-upload form-group mt-5 mb-5 ml-10">
				<input class="input-text upload-url radius" type="text" name="uploadfile-1" id="uploadfile-1" readonly="">
				<a href="javascript:void();" class="btn btn-primary radius upload-btn"><i class="Hui-iconfont"></i> 浏览文件</a>
				<input type="file" multiple="" name="file[]" class="input-file">
			</span>
			<button type="button" class="btn btn-success radius uploadBtn">
				<i class="icon-ok"></i> 上传
			</button>
		</div>
	</form>
	<div class="text-c mt-5 mb-5">
		<input type="hidden" name="images" id="images" value="" />
		<input type="button" value="确定" class="btn btn-success radius roleSubmit" style="width:100px;" />
	</div>
	<div class="dataTables_wrapper no-footer" id="ajaxDiv">
		<include file="Paylog/goback_list" />
	</div>
</div>

<script type="text/javascript" src="__PUBLIC__/h-ui/lib/jquery/1.9.1/jquery.form.js"></script>
<script>
	/*管理员-角色-添加*/
	function admin_role_add(title,url,w,h){
		layer_show(title,url,w,h);
	}
	/*管理员-角色-编辑*/
	function admin_role_edit(title,url,id,w,h){
		layer_show(title,url,w,h);
	}
	
	$(document).ready(function(){
		$(".time").on('click', function(){
			laydate({istime: true, format: 'YYYY-MM-DD'});
		});

		//上传图片
		$(".uploadBtn").on('click', function(){
			var load = layer.load(2);
			$("#uploadform").ajaxSubmit({
				type:'post',
				url:'../member/upload.html',
				success:function(data){
					layer.close(load);
					var data = JSON.parse(data);
					if(data.errCode/1 > 0){
						layer.msg('上传成功', {icon:1, time: 2000});
						$("#images").val(data.errMsg);
					}else{
						layer.msg(data.errMsg, {icon:2, time: 2000});
					}
				},
				error:function(XmlHttpRequest,textStatus,errorThrown){
					
				}
			});
		});

		var fromData = {};
		var msg = "";
		$(".roleSubmit").on('click', function(){
			if(fromData.contract){
				if(msg.length){
					layer.open({
						type: 0,
						title: '账单提醒',
						content: msg,
						yes: function(){
							var load = layer.load(2);
							$(".keyups").each(function(){
								if($(this).closest('td').find('.nodeCheckbox').is(':checked')){
									fromData[$(this).attr('name')] = parseFloat($(this).val());
								}else{
									fromData[$(this).attr('name')] = 0;
								}
							});
							
							fromData['remark'] = $("#remark").val();
							fromData['pay_type'] = $("#pay_type").val();
							fromData['pay_card'] = $("#pay_card").val();
							fromData['createtime'] = $("#createtime").val();
							//获取图片
							fromData['images'] = $("#images").val() || "";
							$.post('ajaxgoback.html', {json: JSON.stringify(fromData)}, function(data){
								layer.close(load);
								layer.msg(data);
								location.reload();
							});
						}
					});
				}else{
					var load = layer.load(2);
					$(".keyups").each(function(){
						if($(this).closest('td').find('.nodeCheckbox').is(':checked')){
							fromData[$(this).attr('name')] = parseFloat($(this).val());
						}else{
							fromData[$(this).attr('name')] = 0;
						}
					});
					
					fromData['remark'] = $("#remark").val();
					fromData['pay_type'] = $("#pay_type").val();
					fromData['pay_card'] = $("#pay_card").val();
					fromData['createtime'] = $("#createtime").val();
					//获取图片
					fromData['images'] = $("#images").val() || "";
					$.post('ajaxgoback.html', {json: JSON.stringify(fromData)}, function(data){
						layer.close(load);
						layer.msg(data);
						location.reload();
					});
				}
			}else{
				layer.msg('请先查询目标房间数据');
			}
		});
		
		$(".querys").on('click', function(){
			var load = layer.load(2);
			var room_number = $("#room_number").val();
			$.get('ajaxgoback.html', {roomnumber: room_number, contract: $("#contract").val()}, function(data){
				layer.close(load);
				if(data.errCode/1){
					fromData = data.info;
					//Set Value
					$("#deposit").val(fromData.deposit);
					$("#deposit_first").val(fromData.deposit_first);
					$("#water_power").val(fromData.water_power);
					$("#electric").val(fromData.electric);
					$("#property").val(fromData.property);
					$("#rent").val(fromData.rent);
					$("#card_peposit").val(fromData.card_peposit);
					$("#acount").val(fromData.acount);
					$("#other").val(fromData.other);
					//加载会员详情
					var uinfo = data.field;
					$("#field2").val(uinfo.contract);
					$("#field1").val(uinfo.nickname);
					$("#field3").val(uinfo.begintime);
					$("#field4").val(uinfo.endtime);
					//是否提醒
					msg = data.msg;
					//家宅历史退房记录
					$("#ajaxDiv").html(data.html);
				}else{
					layer.msg('未查询到相关信息');
				}
			});
		});
		
		$(".nodeCheckbox").on('change', function(){
			var obj = $(this);
			var attkey = obj.attr('attkey');
			var acount = $("#acount").val()/1;
			var ncount = $("#"+ attkey).val()/1;
			
			if(obj.is(':checked')){
				acount += ncount;
			}else{
				acount -= ncount;
			}
			
			$("#acount").val(acount.toFixed(2));
		});
		
		//输入框事件
		$(".keyups").on('keyup', function(){
			var vals = $(this).val() || 0;
			try{
				vals = vals.replace(/[^\-?\d.]/g,'');
				if(vals.match(/^[\+\-]?\d*?\.?\d*?$/)){
					if(!isNaN(vals)){
						$(this).val(vals);
					}
				}
			}catch(e){}
			
			var acount = 0;
			$(".keyups").each(function(){
				if($(this).closest('td').find('.nodeCheckbox').is(':checked')){
					var nums = $(this).val();
					acount += parseFloat(nums);
				}
			});
			
			$("#acount").val(acount.toFixed(2));
		});
		
	});
</script>

</body>
</html>